
<template>
    <van-nav-bar :title="route.meta.title" left-arrow @click-left="router.back()" fixed placeholder></van-nav-bar>
    <div v-if="isLogin">
        <div class="myInfo">
            <div>
                <van-image width="100" height="100" :src="userStore.avatar" @click="router.push('/myInfo')" />
            </div>
            <div class="right">
                <p class="userName">{{ userStore.name }}</p>
                <p class="userSex">{{ userStore.sex }}</p>
                <p class="userSign">{{ userStore.sign }}</p>
            </div>
        </div>
        <div class="content">
            <van-cell title="我的收获地址" is-link icon="logistics" to="/address" />
            <van-cell title="我的订单" is-link icon="orders-o" to="/order" />
            <van-cell title="我的文章" is-link icon="shop-o" to="/myArticle"/>
            <van-cell title="我的收藏" is-link icon="star-o" to="/collect"/>
            <van-cell title="我的点赞" is-link icon="good-job-o" to="/praise"/>
        </div>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" block @click="logOut">退出</van-button>
    </div>
    <div v-if="!isLogin">
        <van-empty description="未登录" />
        <div style="text-align: center;">
            <van-button type="primary" @click="router.push('/login')">去登陆</van-button>
        </div>
    </div>
</template>
    
<script setup>
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user.js'
import { getToken, removeToken } from '@/utils/token.js'
import { out } from '@/api/auth.js'
import { ref } from 'vue'
const route = useRoute()
const router = useRouter();
const userStore = useUserStore()
//登录状态
let isLogin = ref(false);
if (getToken()) {
    isLogin.value = true
}
let logOut = async () => {
    let res = await out()
    if (res.code == 1) {
        removeToken()
        router.replace('/login')
    }
}
</script>
    
<style  lang="scss" scoped>
.myInfo {
    display: flex;
    padding: .2133rem .4267rem;
    background-color: #fff;

    &:deep(.van-image__img) {
        border-radius: .2667rem;
    }

    .right {
        margin-left: .2133rem;
        font-size: 12px;

        .userName {
            margin-top: 0.05333rem;
            font-size: .53333rem;
        }

        .userSex {
            margin: 0.16rem 0;
        }
    }
}

.content {
    margin-top: .4rem;
}

.van-button--block {
    margin: .4rem auto;
    width: 95%;
}
</style>